<template lang="pug">
  .input-group
    input.form-control(
      type="text"
      v-model="currentValue"
      :id="'form-'+name"
      :placeholder="placeholder")
    .input-group-prepend
      span.input-group-text.iconfont.icon-map(@click.self="isShow = true")
    SmartDialog(
      title="获取位置"
      v-model="isShow")
      SearchLocation(
        :zoom="zoom"
        :center="centerValue"
        :funcEvent="funcEvent"
        :markers="markers"
        @getLnglat="getLnglat")
      span.btn.btn-complete(slot="footer",@click.self="isShow = false") 确定
</template>

<script>
import SmartDialog from '@/components/SmartDialog'
import SearchLocation from '@/components/Map/SearchLocation'
import _i18n from '@/utils/i18n'
export default {
  name: 'SmartLocation',
  components: {
    SmartDialog,
    SearchLocation
  },
  props: {
    name: String,
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    value: {
      type: Array,
      default: () => ([])
    },
    values: {
      type: Object,
      default: () => ({})
    }, // 经纬度数据集，目前仅支持一个坐标点
    zoom: {
      type: Number,
      default: 12
    },
    center: {
      type: Array,
      default: () => []
    },
    funcEvent: {
      type: Object,
      default: () => ({})
    },
    lngKey: String, // 纬度关键字
    latKey: String // 经度关键字
  },
  data () {
    return {
      isShow: false,
      locationValue: this.lngKey && this.latKey ? [this.values[this.lngKey], this.values[this.latKey]] : this.value,
      // locationValue: this.value && this.value.length ? this.value : [this.values[this.lngKey], this.values[this.latKey]],
      buttonList: [{
        name: 'submit',
        label: '确定',
        type: 'complete',
        func: () => {
          this.isShow = false
        }
      }]
    }
  },
  computed: {
    centerValue () {
      return this.center && this.center.length ? this.center
        : this.locationValue.length ? this.locationValue : _i18n.lnglat
    },
    markers () {
      return this.locationValue.length ? [this.locationValue] : [] // 仅支持单坐标点
    },
    currentValue: {
      get () {
        const value = this.locationValue ? this.locationValue : (this.value ? this.value : '')
        // const value = this.locationValue ? this.locationValue.join(',') : (this.value ? this.value.join(',') : '')
        this.$emit('input', value)
        return value
      },
      set (val) {
        this.$emit('input', val || [])
      }
    }
  },
  methods: {
    // 获取地图选择的坐标，仅支持单选
    getLnglat (lnglat) {
      this.locationValue = lnglat
    }
  }
}
</script>

<style lang="sass" scoped>
.amap-warper
  width: 500px
  height: 500px
</style>
